<template>
  <div class="detail top-page" ref="detailRef">
    <!-- 导航栏 -->
    <TabControl  v-if="showTabControl" class="tabs" :titles="names" @tabItemClick="tabClick" ref="tabControlRef"></TabControl>
    <van-nav-bar title="房屋详情" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <!-- 轮播图、描述、房屋设施、房东介绍、评论、须知、周边、说明 -->
    <div class="main" v-if="mainPart.dynamicModule?.positionModule">
      <DetailSwipe></DetailSwipe>
      <DetailInfos name="描述" :ref="getSectionRef"></DetailInfos>
      <DetailFacility name="设施" :ref="getSectionRef"></DetailFacility>
      <DetailLandlord name="房东" :ref="getSectionRef"></DetailLandlord>
      <DetailComment name="评论" :ref="getSectionRef"></DetailComment>
      <DetailNotice name="须知" :ref="getSectionRef"></DetailNotice>
      <DetailMap name="周边" :ref="getSectionRef" :position="mainPart.dynamicModule.positionModule"></DetailMap>
      <DetailIntro></DetailIntro>
    </div>
    <div class="footer">
      <img src="@/assets/img/detail/icon_ensure.png" alt="">
      <div class="text">弘源旅途, 永无止境!</div>
    </div>
  </div>
</template>

<script setup>
import TabControl from "@/components/tabControl/tabControl.vue"
import DetailSwipe from "./compontents/detailSwipe.vue"
import DetailInfos from "./compontents/detailInfos.vue"
import DetailFacility from './compontents/detailFacility.vue'
import DetailLandlord from './compontents/detailLandlord.vue'
import DetailComment from './compontents/detailComment.vue'
import DetailNotice from './compontents/detailNotice.vue'
import DetailMap from './compontents/detailMap.vue'
import DetailIntro from './compontents/detailIntro.vue'

import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
import useDetailStore from "../../stores/modules/detail"
import { computed, onMounted, nextTick, ref, watch } from "vue";
import detailLandlordVue from "./compontents/detailLandlord.vue";
import { storeToRefs } from "pinia"
import useScroll from "@/hooks/useScroll"

// 返回
const router = useRouter()
const onClickLeft = () => {
    history.back()
  };

// 获取houseId派发actions
const route = useRoute()
const houseId = route.params.id

const detailStore = useDetailStore()
detailStore.getHouseInfos(houseId)
const { mainPart } = storeToRefs(detailStore)

// 导航tabs
// const names = ref(["描述", "设施", "房东", "评论", "须知", "周边"])


//使用组件内守卫，对离开页面事件做一些操作，
onBeforeRouteLeave((to) => {
  if(to.path == "/home"){
    mainPart.value = {}
  }
})

// tabControl相关的操作,滑动距离顶部300时显示导航栏--TabControl
const detailRef = ref()
const { scrollTop } = useScroll(detailRef)
const showTabControl = computed(() => {
  return scrollTop.value >= 300
})

// const landlordRef = ref()
// const sectionEls = []
// const getSectionRef = (value) => {
//   sectionEls.push(value.$el)
// }
const sectionEls = ref({})
const names = computed(() => {
  return Object.keys(sectionEls.value)
})
const getSectionRef = (value) => {
  if(!value) return   // 卸载的时候为null
  const name = value.$el.getAttribute("name")
  sectionEls.value[name] = value.$el
}

// 点击导航栏标签跳转到相应的内容区
let isClick = false
let isScrollTop = -1
const tabClick = (index) => {
  const key = Object.keys(sectionEls.value)[index]
  const el = sectionEls.value[key]
  let instance = el.offsetTop
  if (index !== 0) {
    instance = instance - 44
  }
  isClick = true
  isScrollTop = instance

  detailRef.value.scrollTo({
    top: instance,
    behavior: "smooth"
  })
}

// 页面滚动, 滚动时匹配对应的导航栏标签(tabControll)的index
const tabControlRef = ref()
watch(scrollTop, (newScrollTop) => {
  if(newScrollTop == isScrollTop){
    isClick = false
  }
  if(isClick) return  // 如果是点击模式，不监听scrollTop的变化
  // 1.获取所有的区域的offsetTops
  const els = Object.values(sectionEls.value)
  const values = els.map(el => el.offsetTop)

  // 2.根据newScrollTop去匹配想要索引
   let index = values.length - 1
  for (let i = 0; i < values.length; i++) {
    if (values[i] > newScrollTop + 44) {
      index = i - 1
      break
    }
  }
  // console.log(index)
  tabControlRef.value?.setCurrentIndex(index)
})

</script>

<style lang="less" scoped> 
.tabs {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
}
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}

</style>